<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>logogogo</title>
  <style>
    #app {
      width: 600px;
      margin: 10px auto;
    }

    .app {
      border: 1px solid #000;
      margin-bottom: 10px;
      padding: 5px;
    }

    .tb td,
    .tb th {
      padding: 5px;
      border: 1px solid black;
    }

    .tb {
      border-collapse: collapse;
      width: 100%;
    }

    .tb th {
      background-color: #0094ff;
      color: white;
    }

    .tb td {
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="app">
      编号：
      <!-- ref属性:表示对dom的引用，它的值表示dom的名称 -->
      <!-- v-setcolor 自定义属性s -->
      <input type="text" v-model="userAdd.id" ref="onfocus" v-setcolor="color"> 品牌名称：
      <input type="text" v-model="userAdd.name">
      <input type="button" value="添加" @click="addData" @keydown="addData">
    </div>
    <div class="app">
      搜索：
      <input type="text" placeholder="请输入搜索条件" v-model="userSearch">
    </div>
    <div>
      <table class="tb">
        <tr>
          <th>编号</th>
          <th>品牌名称</th>
          <th>创立时间</th>
          <th>操作</th>
        </tr>
        <tr v-if="list.length<1">
          <td colspan="4">没有品牌信息</td>
        </tr>
        <!-- 动态生成列表 -->
        <tr v-for="(item,index) in newList" :key="index">
          <th>{{item.id}}</th>
          <th>{{item.name}}</th>
          <!-- 时间格式化 -->
          <th>{{item.ctime | timefilter("/")}}</th>
          <th>
            <a href="javascript:;" @click="delData(item.id)">删除</a>
          </th>
        </tr>
      </table>
    </div>
  </div>
</body>
<script src="./vue2.js"></script>
<script src="./axios.js"></script>
<script>
  // 过滤器：时间格式化
  Vue.filter("timefilter", (val, ste) => {
    // val:格式化的dom元素，是默认参数
    // step自传参。参数传入顺序要从step开始计算

    // 数据库获取的时间为字符串  需要转换
    val = new Date(val);

    var y = val.getFullYear();
    var m = val.getMonth() + 1;
    var d = val.getDate();
    return y + ste + m + ste + d;
  })
  //自定义属性    指令：v-自定义名称
  // el :dom     binding.value指用户输入的值
  Vue.directive("setcolor", (el, binding) => {
    el.style.color = binding.value;
  })
  var vm = new Vue({
    el: "#app",
    data: {
      userSearch: "",
      color: "blue",
      userAdd: {
        id: "",
        name: "",
        ctime: new Date()
      },
      list: [],
    },
    methods: {
      // 请求 删除数据库的数据并重新展示      
      delData(id) {
        axios.get(`http://157.122.54.189:9093/api/delproduct/${id}`)
          .then(result => {
            this.getData();
          })
          .catch(err => {
            console.log(err);
          })
        // this.list.splice(index);
      },
      // 请求 新增到数据库并展示
      addData() {
        // this.ctime=new Date();
        // this.list.push(this.userAdd);
        // this.userAdd = {
        //   id: "",
        //   name: "",
        //   ctime: new Date()
        // }
        axios.post("http://157.122.54.189:9093/api/addproduct", {
            name: this.userAdd.name
          })
          .then(result => {
            this.getData();
            this.userAdd={
              id: "",
              name: "",
              ctime: new Date()
            }
          })
          .catch(err => {
            console.log(err);
          })


      },

      // 请求数据  获取全部数据并展示
      getData() {
        axios.get("http://157.122.54.189:9093/api/getprodlist")
          .then(result => {
            this.list = result.data.message;
            // console.log(result.data);
          })
          .catch(errer => {
            console.log(errer);
          })
      }
    },
    mounted() {
      // console.log(this.$refs.onfocus);
      this.$refs.onfocus.focus();
      this.getData();
    },
    // 计算属性
    computed: {
      newList() {
        return this.list.filter(obj => {
          return obj.name.indexOf(this.userSearch) !== -1
        })
      }
    }
  })
</script>

</html>